<!doctype html>
<html>
    <head>       
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
        <meta name = "format-detection" content = "telephone=no"/>
		<!-- width=device-width; -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />		
        <title>Hat</title>
        <!--<style type="text/css" media="screen">@import "css/jquery.mobile-1.0a2.css";</style>-->
		<link rel="stylesheet" media="screen" href="css/style.css">
        <script src="js/jquery-1.4.4.min.js"></script>		
        <!--<script src="js/jquery.mobile-1.0a2.js" type="application/x-javascript" charset="utf-8"></script>	-->
		<script src="js/script.js" type="application/x-javascript"></script>
		<script src="js/stars.js" type="application/x-javascript"></script>
		<script src="js/sounds.js" type="application/x-javascript"></script>
		<script src="js/edit_players_page.js" type="application/x-javascript"></script>
		<script src="js/players_page.js" type="application/x-javascript"></script>
		<script src="js/edit_words_page.js" type="application/x-javascript"></script>
		<script src="js/game_page.js" type="application/x-javascript"></script>
		<script src="js/settings_page.js" type="application/x-javascript"></script>
    </head>
	<body>	
	
		<div data-role="page" id="main_page" class="page active" data-theme="b">
			<img style="position: absolute;" src="img/bg.png" class="scaleX"/>
			<div class="scale center">
				<img style="position: absolute; left: 49px; top: 331px;" src="img/hat_bg2.jpg"/>
				<div style="position: absolute; left: 26px; top: 126px;" class="stars_box"></div>
				<img style="position: absolute; left: 76px; top: 155px;" src="img/main_content.png"/>
				<div class="page_title language" style="left: 57px; top: 173px; padding-top: 20px;" en="Menu">Главное меню</div>
				
				<img style="position: absolute; left: 86px; top: 337px;" class="button ilanguage" 
						id="main_btn_start" en="img/en_main_btn_start.png" src="img/main_btn_start.png" />
				<img style="position: absolute; left: 237px; top: 485px;" class="button ilanguage" 
						id="main_btn_settings" en="img/en_main_btn_settings.png" src="img/main_btn_settings.png" />			
				<img style="position: absolute; left: 318px; top: 642px;" class="button  ilanguage" 
						id="main_btn_rule" en="img/en_main_btn_rule.png" src="img/main_btn_rule.png" />			
			</div>
		</div>		
		
		<div data-role="page" id="enter_players_page" class="page" data-theme="b">
			<img style="position: absolute;" src="img/bg.png" class="scaleX"/>
			<div class="scale center4">
				<img style="position: absolute; left: 49px; top: 331px;" src="img/hat_bg2.jpg"/>
				<div style="position: absolute; left: 26px; top: 126px;" class="stars_box"></div>
				<div class="page_title language" en="Putting players">Ввод игроков</div>
				<div style="position: absolute; left: 55px; top: 297px;">
					<img style="position: absolute;" src="img/page_content.png"/>
					<span style="position: absolute; left: 25px; top: 30px;" class="txt_title language" en="Players">Имя</span>
					<span style="position: absolute; left: 530px; top: 30px; text-align: center; width: 105px;" 
							class="txt_title language" en="Team" >Команда</span>
				</div>
				
				<img style="position: absolute; left: 90px; top: 885px;" class="button" id="btn_players_back" src="img/btn_back.png" />
				<img style="position: absolute; left: 225px; top: 885px;" class="button ilanguage" 
						id="btn_players_shuffle" en="img/en_btn_players_shuffle.png" src="img/btn_players_shuffle.png" />
				<img style="position: absolute; left: 500px; top: 885px;" class="button ilanguage" 
						id="players_btn_next" en="img/en_btn_next.png" src="img/btn_next.png" />
				
				<div style="position: absolute; left: 76px; top: 354px;" id="players_box"></div>	
				<div style="position: absolute; left: 568px; top: 350px;" id="teams_box"></div>
				
				<div id="epDialogBlock"></div>
				<div id="epDialog" class="alertDialog" style="top: 440px;">			
					<span id="epDialogText" class="alertText"></span>
					<img style="position: absolute; left: 205px; bottom: 20px" class="button ilanguage" 
							id="twoteam_btn_ok" en="img/en_dialog_btn_ok.png" src="img/dialog_btn_ok.png" />
					<img style="position: absolute; left: 80px; bottom: 20px" class="button ilanguage" 
							id="onep_btn_ok" en="img/en_dialog_btn_ok.png" src="img/dialog_btn_ok.png" />
					<img style="position: absolute; left: 330px; bottom: 20px" class="button ilanguage" 
							id="onep_btn_cancel" en="img/en_dialog_btn_cancel.png" src="img/dialog_btn_cancel.png" />
				</div>		
			</div>			
		</div>	
		
		<div data-role="page" id="enter_words_page" class="page" data-theme="b">
			<img style="position: absolute;" src="img/bg.png" class="scaleX"/>
			<div class="scale center4">			
				<img style="position: absolute; left: 49px; top: 331px;" src="img/hat_bg2.jpg"/>
				<div style="position: absolute; left: 26px; top: 126px;" class="stars_box"></div>
				<div class="page_title language" en="Entering words">Ввод слов</div>
				<div style="position: absolute; left: 55px; top: 297px;">
					<img style="position: absolute;" src="img/page_content.png"/>
					<span style="position: absolute; left: 58px; top: 23px;" class="txt_words_info language" 
							en="In each paper write down a word which other players will guess.">
						Впишите в каждую бумажку слово, которое будут угадывать участники игры.
					</span>
					<span style="position: absolute; left: 48px; top: 117px; color: #42210B;" 
							class="txt_title language" en="Player:">игрок:</span>
					
					<img style="position: absolute; left: 35px; top: 585px;" class="button" id="words_btn_back" src="img/btn_back.png" />
					<img style="position: absolute; left: 170px; top: 585px;" class="button ilanguage" 
							id="words_btn_shuffle" en="img/en_btn_players_shuffle.png" src="img/btn_players_shuffle.png" />				
					<img style="position: absolute; left: 445px; top: 585px;" class="button ilanguage" 
							id="words_btn_next" en="img/en_btn_next.png" src="img/btn_next.png" />				
				</div>

				<span style="position: absolute; left: 102px; top: 445px;" id="player_name">Игрок 1</span>
				
				<div id="words" style="position: absolute; left: 95px; top: 528px;"></div>
			</div>	
		</div>		
		
		<div data-role="page" id="game_page" class="page" data-theme="b">

			<div class="scale bottom">
				<img style="position: absolute;" src="img/game_back.jpg"/>
				<div style="position: absolute;" class="lights_box"></div>
				
				<div style="position: absolute; right: 10px; bottom: 20px" id="boxBags"></div>
				
				<div id="circles"></div>
				<div id="circle_table"></div>
				
				<img style="position: absolute; left: 238px; top: 252px" class="button ilanguage" 
						id="game_btn_guess" en="img/en_guessing.png" src="img/guessing.png" />
				<img style="position: absolute; left: 192px; top: 557px" class="button" id="game_btn_hat" src="img/hat.png" />
				
				<img style="position: absolute; left: 20px; bottom: 31px" class="button ilanguage" 
						id="game_btn_menu" en="img/en_game_btn_menu.png" src="img/game_btn_menu.png" />
				<img style="position: absolute; left: 120px; bottom: 31px" class="button ilanguage" 
						id="game_btn_rule" en="img/en_game_btn_rule.png" src="img/game_btn_rule.png" />
				<img style="position: absolute; left: 246px; bottom: 31px" class="button" id="game_btn_help" src="img/btn_game_rule.png" />
						
				<div style="position: absolute;" id="gameWords"></div>
			</div>
			
			<div class="scale" style="height: 0px;">
				<div style="position: absolute; left: 633px;">
					<span style="position: absolute; top: 10px; " id="game_txt_time"></span>
					
					<img style="position: absolute; top: 105px;" class="button" id="game_btn_pause" src="img/game_btn_pause.png" />
					<img style="position: absolute; top: 231px;" class="button" id="game_btn_stop" src="img/game_btn_stop.png" />
					<img style="position: absolute; top: 356px;" class="button" id="game_btn_play" src="img/game_btn_play.png" />
				</div>
				
				<div style="position: absolute; left: 34px; top: 38px" id="boxCurTeam"></div>
				<div style="position: absolute; left: 34px; top: 105px" id="boxCurPlayer" class="player_box"><span></span></div>			
			</div>		
			
			<div id="gameDialogBlock" class="block"></div>
			<div id="gameDialogBox" class="scale center">
				<div class="gameDialog">
					<span id="dialog_title" class="language" en="Game results">Результаты игры</span>
					
					<table style="position: absolute; left: 22px; top: 200px" id="results">
						<tr>
							<th width="75px"></th> 
							<th width="72px" class="language" en="Teams">Команды</th>
							<th width="370px" align="right" class="language" en="Points">Угадал</th>
							<th width="77px" class="language" en="Result">Итог</th>
						</tr>
						<tbody id="resultsBody"></tbody>
					</table>				
					
					<span id="dialog_text"></span>
					<img style="position: absolute; left: 240px; top: 560px" class="button dialogBtn ilanguage" 
							id="dialog_btn_start" en="img/en_dialog_btn_start.png" src="img/dialog_btn_start.png" />
					<img style="position: absolute; left: 240px; top: 575px" class="button dialogBtn ilanguage" 
							id="dialog_btn_next" en="img/en_btn_next.png" src="img/btn_next.png" />
					<img style="position: absolute; left: 106px; top: 575px" class="button dialogBtn ilanguage" 
							id="dialog_btn_ok" en="img/en_dialog_btn_ok.png" src="img/dialog_btn_ok.png" />
					<img style="position: absolute; left: 400px; top: 575px" class="button dialogBtn ilanguage" 
							id="dialog_btn_more" en="img/en_dialog_btn_more.png" src="img/dialog_btn_more.png" />
				</div>
				<div id="exitDialog" class="alertDialog">			
					<span id="exitDialogText" class="alertText language" en="Do you really want to quit?">Вы действительно хотите выйти из игры?</span>
					<img style="position: absolute; left: 80px; bottom: 20px" class="button ilanguage" 
							id="exit_btn_ok" en="img/en_dialog_btn_ok.png" src="img/dialog_btn_ok.png" />
					<img style="position: absolute; left: 330px; bottom: 20px" class="button ilanguage" 
							id="exit_btn_cancel" en="img/en_dialog_btn_cancel.png" src="img/dialog_btn_cancel.png" />
				</div>	
			
			</div>
		</div>		

		<div data-role="page" id="settings_page" class="page" data-theme="b">
			<img style="position: absolute;" src="img/bg.png" class="scaleX"/>
			<div class="scale center4">			
				<img style="position: absolute; left: 49px; top: 331px;" src="img/hat_bg2.jpg"/>
				<div style="position: absolute; left: 26px; top: 126px;" class="stars_box"></div>
				<div class="page_title language" en="Settings">Настройки</div>
				
				<div style="position: absolute; left: 55px; top: 297px;">
					<img style="position: absolute;" src="img/page_content.png"/>
					
					<div style="position: absolute; left: 25px; top: 22px;" class="txt_title language" en="Duration">Длительность</div>
					<div style="position: absolute; left: 522px; top: 22px; width: 110px; text-align: center;" 
							class="txt_title language" en="Seconds">секунды</div>
					<div style="position: absolute; left: 25px; top: 228px;" class="txt_title language" en="Papers">Бумажки</div>
					<div style="position: absolute; left: 522px; top: 228px; width: 110px; text-align: center;" 
							class="txt_title language" en="Amount">кол-во</div>
					
					<div style="position: absolute; left: 23px; top: 52px;" class="settings_name language" en="1 round">1 тур</div>
					<div style="position: absolute; left: 23px; top: 108px;" class="settings_name language" en="2 round">2 тур</div>
					<div style="position: absolute; left: 23px; top: 164px;" class="settings_name language" en="3 round">3 тур</div>
					<div style="position: absolute; left: 23px; top: 259px;" class="settings_name language" 
							en="Amount of papers per person">Количество бумажек на игрока</div>
					
					<div style="position: absolute; left: 25px; top: 345px;" class="txt_title language" en="Music">Музыка</div>
					<div style="position: absolute; left: 538px; top: 371px;" class="sound_check" tag="music"></div>
					<div style="position: absolute; left: 25px; top: 457px;" class="txt_title language" en="Sounds">Звуки</div>
					<div style="position: absolute; left: 538px; top: 486px;" class="sound_check" tag="sound"></div>
				</div>
				
				<img style="position: absolute; left: 320px; top: 885px;" class="button ilanguage" 
						id="settings_btn_next" en="img/en_btn_next.png" src="img/btn_next.png" />
				<div style="position: absolute; left: 571px; top: 346px;" class="edit_settings tourSec" tag="0">0</div>
				<div style="position: absolute; left: 571px; top: 403px;" class="edit_settings tourSec" tag="1"/>0</div>
				<div style="position: absolute; left: 571px; top: 459px;" class="edit_settings tourSec" tag="2"/>0</div>
				
				<div style="position: absolute; left: 571px; top: 552px;" class="edit_settings" id="count_word"/>5</div>
				<div style="position: absolute; left: 571px; top: 607px; display: none;" class="selectbox" id="count_word_select">
					<div class="edit_settings select">3</div>
					<div class="edit_settings select">4</div>
					<div class="edit_settings select">5</div>
					<div class="edit_settings select">6</div>
					<div class="edit_settings select">7</div>
					<div class="edit_settings select">8</div>
				</div>
				
				<div style="position: absolute; left: 571px; top: 514px; display: none;" class="selectbox" id="tourSec_select">
					<div class="edit_settings select">10</div>
					<div class="edit_settings select">15</div>
					<div class="edit_settings select">20</div>
					<div class="edit_settings select">25</div>
					<div class="edit_settings select">40</div>
					<div class="edit_settings select">80</div>
					<div class="edit_settings select">160</div>
					<div class="edit_settings select">240</div>
					<div class="edit_settings select">290</div>
					<div class="edit_settings select">360</div>			
				</div>
				
				<input style="position: absolute; left: 73px; top: 686px;" type="range" 
						class="sound_slider" id="volume_back" min="0" max="100" value="100" />
				<input style="position: absolute; left: 73px; top: 801px;" type="range" 
						class="sound_slider" id="volume_sound" min="0" max="100" value="100" />
			</div>
		</div>
		
		
		<div style="position: absolute; display: none; background: #000000; height: 1000px;" id="rule" class="page">
			<div class="scale bottom">
				<img style="position: absolute;" class="ilanguage" en="img/en_gamerule_bottom.jpg" src="img/gamerule_bottom.jpg"/>
			</div>
			<div class="scale">
				<img style="position: absolute; left: 37px; top: 21px;" class="ilanguage" en="img/en_gamerule_top.png" src="img/gamerule_top.png"/>
			</div>
		</div>

		<div data-role="page" id="players_page" class="page" data-theme="b">
			<img style="position: absolute;" src="img/bg.png" class="scaleX"/>
			<div class="scale center">
				<img src="img/players_back2.jpg"/>	
				<img style="position: absolute; left: 61px; top: 63px;" class="ilanguage" 
						en="img/en_title_players.png" src="img/title_players.png" />
				<!--
				<img style="position: absolute; left: 400px; top: 915px;" class="button" id="players_btn_1tur" src="img/players_btn_1tur.png" />
				<img style="position: absolute; left: 15px; top: 915px;" class="button" id="players_btn_back" src="img/players_btn_back.png" />
				-->
				<div id="players_table"></div>
			</div>
			<div style="height: 1024px;" class="scale bottom">
				<img style="position: absolute; top: 896px;" src="img/players_bottom.png" />
				<img style="position: absolute; left: 400px; top: 915px;" class="button ilanguage" 
						id="players_btn_1tur" en="img/en_players_btn_1tur.png" src="img/players_btn_1tur.png" />
				<img style="position: absolute; left: 15px; top: 915px;" class="button" id="players_btn_back" src="img/players_btn_back.png" />

			</div>			
		</div>			
		
		<div data-role="page" id="rule_page" class="page" data-theme="b">
			<img style="position: absolute;" src="img/bg.png" class="scaleX"/>
			<div class="scale center">
				<img style="position: absolute; left: 49px; top: 331px;" src="img/hat_bg2.jpg"/>
				<div style="position: absolute; left: 26px; top: 126px;" class="stars_box"></div>
				<div style="left: 61px; top: 50px;" class="page_title language" en="Rules">Правила</div>	
				<div style="position: absolute; left: 54px; top: 212px;" class="rule_box">
					<span class="rule_text" id="rule_text">
Игра предназначена для участников в количестве от 4 до 10 человек.<br/><br/>

1. Все игроки вносятся в список для составления команд. Команды из двух человек отмечены
цветом;<br/>
2. Каждый игрок пишет на бумажках по одному слову, которые потом будут угадывать другие
игроки;<br/>
3. Игроки рассаживаются в соответствии с предложенной схемой;<br/>
4. Начинается игра. Тот, чье имя высвечено на экране, начинает свой ход.
Кнопка «Play» запускает отсчет времени – появляется бумажка со словом.
Игрок должен объяснить высвеченное слово своему партнеру по команде так, чтобы тот
назвал это слово.<br/><br/>
<b>Правила туров:</b><br/>
1 тур – при объяснении нельзя использовать однокоренные слова;<br/>
2 тур – при объяснении нельзя вообще говорить;<br/>
3 тур - при объяснении можно сказать только одно НЕоднокоренное слово.<br/>
5. Если партнер угадывает слово, нажимается кнопка «Угадал!» - появляется следующая
бумажка. Команда получает одно очко за угаданное слово;<br/>
6. Если игрок нарушает правило тура, нажимается кнопка «Стоп» - ход переходит
следующему игроку;<br/>
7. Шляпа с бумажками ходит по кругу, пока все слова не будут отгаданы.<br/>
Когда все слова закончились – заканчивается тур, подводится промежуточный итог,
начинается следующий тур.<br/><br/>
<b>Выигрывает команда, отгадавшая максимальное количество бумажек.</b>
					</span>
					
					<span class="rule_text" id="rule_text_en" style="display: none;">					
The number of players could be from 4 to 10.<br/><br/>
All players enter their names. Random teams of two are composed.<br/> 
Every player writes down a word of their choice on the piece of paper without letting the other players know what it is.<br/> 
All the players take their seats according to the seating chart.<br/>  
The game starts. The first player’s name is shown on the screen. Press play in order for the word to appear. The
timer starts.<br/><br/> 
<b>The player must explain the word to his partner without breaking the rules:</b><br/>
in Round 1 the player has 10 seconds and is not allowed to use cognate words.<br/>
in Round 2 the player has 15 seconds and during the game the player is only allowed to explain the word via sharades(i.e.
without speaking/saying a single word)<br/>
in Round 3 the player has 20 seconds and is allowed to say only one not cognate word<br/><br/>

If the partner (the other half of the team) guessed the word then they should press the GUESS button. The team receives
one point for one guessed word.<br/>
If the player broke the rule than button STOP must be pressed which terminates the current game. It’s next teams turn.<br/>

The hat with the words goes around in a circle for all players to have a go.<br/>
Once all the papers are guessed the first round is finished and the score is calculated.<br/><br/>
<b>The whole process is repeated for two more rounds. The team who collects the most pieces of paper i.e. guesses the most words wins.<b/>			
				</span>
				</div>
				<!--<img style="position: absolute; left: 54px; top: 212px;" src="img/rule_text.png"/>	-->
				<img style="position: absolute; left: 344px; top: 904px;" class="button" id="rule_ok" src="img/rule_ok.png"/>					
			</div>
		</div>			
		
	</body>
</html>